<template>
  <div class="sheetHeatDaily-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌单访问</el-breadcrumb-item>
      <el-breadcrumb-item>访问歌单日排行</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import testAx from '@/utils/testApiServer.js'
export default {
  name: 'dailyHeat',
  methods: {
    async getDaily() {
      const {data: res} = await testAx.get('/dailyOrder')
      this.draw(res.times, res.list)
    },
    draw(x, list1) {
      const option = {
        title: {
          text: '歌单日访问',
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: x
        },
        legend:{
          type: 'plain',
          top: 'bottom',
          show: true,
          textStyle: {
            fontSize: 14
          }
        },
        label: {
          show: true
        },

        yAxis: {
          type: 'value'
        },
        series: list1
      };
      var myCharts = echarts.init(this.$refs.container)
      myCharts.setOption(option)
    }
  },
  mounted() {
    this.getDaily()
  }
}
</script>